<template>
    <div id="box">
        <div class="container">
                <i class="el-icon-more"></i>
                <p>登录后可查看{{name}}</p>
                <div>
<!--                    <span @click="to('login')">登录</span>-->
                    <span @click="to('login')">登录</span>
                    <span @click="to('register')">注册</span>
                    <el-drawer
                            size="100%"
                            :show-close="true"
                            :visible.sync="drawer"
                            :direction="direction">
                        <register @regSuc="regSuc" v-if="viewName=='register'"></register>
<!--                        <login v-if="viewName=='login'"></login>-->
                        <login @loginSuc="loginSuc" v-if="viewName=='login'"></login>
                    </el-drawer>
                </div>
        </div>
    </div>
</template>

<script>
    import register  from "./register.vue";
    import login  from "./login.vue";
    export default {
        methods:{
            to(name){
                this.drawer=!this.drawer
                this.viewName = name
            },
            loginSuc(){
                this.drawer=!this.drawer
                this.$emit('isLogin')
            },
            regSuc(){
                this.drawer=!this.drawer
                this.to('login')
            }
        },
        components:{
            register,login
        },
        props:['name'],
        data(){
            return {
                viewName:'',
                drawer: false,
                direction:"btt",
                showClose:true,
                user:''
            }
        },
    }
</script>

<style lang="less" scoped>
    #box{
        display: flex;
        flex-direction: column;
        .container{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 500px;
            line-height: 80px;
            i{
                font-size: 80px;
            }
            span{
                display: block;
                background: #FFC114;
                width: 80px;
                text-align: center;
                height: 25px;
                line-height: 25px;
                border-radius: 5px;
                font-size: 10px;
                margin: 0 5px;
            }
            div{
                display: flex;
            }
        }

    }

</style>